<template>
  <el-container>
    <el-header>
      <Header></Header>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <Aside></Aside>
      </el-aside>
      <el-main>
        <h3 style="text-align: center">预览会员</h3>
        <table width="98%" border class="table table-bordered">
          <tbody>
            <tr>
              <td align="right">ID</td>
              <td>{{ form.userid }}</td>
            </tr>
            <tr>
              <td align="right">所属组</td>
              <td v-html="form.groupid"></td>
            </tr>
            <tr>
              <td align="right">真实姓名</td>
              <td>{{ form.truename }}</td>
            </tr>
            <tr>
              <td align="right">电话</td>
              <td>{{ form.telephone }}</td>
            </tr>
            <tr>
              <td align="right">QQ</td>
              <td>{{ form.qq }}</td>
            </tr>
            <tr>
              <td align="right">手机</td>
              <td>{{ form.mobile }}</td>
            </tr>
            <tr>
              <td align="right">邮箱</td>
              <td>{{ form.email }}</td>
            </tr>
            <tr>
              <td align="right">地址</td>
              <td>{{ form.address }}</td>
            </tr>
          </tbody>
        </table>
      </el-main>
    </el-container>
    <el-footer>
      <Footer></Footer>
    </el-footer>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      form: {},
    };
  },
  async mounted() {
    let userid = parseInt(this.$route.query.userid);
    const data = await this.$axios.post("/api/member/preview", {
      userid: userid,
      formated: 1,
    });
    this.form = data.data;
  },
  methods: {},
};
</script>

<style scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
}

.el-main {
  color: #333;
}
</style>
